<template>
    <div class="vessel-list">
        <div class="vessel-table-title">{{ title }}</div>
        <el-table class="vessel-table-header"
                  stripe
                  style="width: 100%">
            <el-table-column
                prop="date"
                :label="labelName"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="vesselName"
                label="船名"
                align="center"
                >
            </el-table-column>
            <el-table-column
                prop="voyageNo"
                label="航次号"
                align="center"
                >
            </el-table-column>
        </el-table>
        <vue-seamless-scroll class="vessel-seamless" :data="vesselDataList" :class-option="defaultOption"
                             style="height:100%;overflow:hidden;">
            <el-table
                :data="vesselDataList"
                stripe
                style="width: 100%"
                :show-header="false">
                <el-table-column
                    prop="date"
                    label="抵港时间">
                </el-table-column>
                <el-table-column
                    prop="vesselName"
                    label="船名">
                </el-table-column>
                <el-table-column
                    prop="voyageNo"
                    label="航次号">
                </el-table-column>
            </el-table>
        </vue-seamless-scroll>
    </div>
</template>

<script>

export default {
    name: "VesselList",
    props: {
        vesselDataList: Array,
        title: String,
        labelName: String,
    },

    // 监听属性 类似于data概念
    computed: {
        defaultOption() {
            return {
                step: 0.3, // 数值越大速度滚动越快
                limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
                maxLength: 1, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 0 // 单步运动停止的时间(默认值1000ms)
            }
        }
    }
}
</script>

<style scoped>
.vessel-table-title {
    color: white;
    font-size: 24px;
    font-weight: bold;
}

.vessel-table-header > div.el-table__header-wrapper > table > thead > tr > th.el-table__cell > div {
    font-size: 20px;
}

ul > li {
    width: 100%;
    display: inline-flex;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.8)
}
</style>
<style>
.vessel-table-header .el-table__body-wrapper {
    display: none;
    overflow: hidden;
}

.el-table {
    background-color: transparent !important; /* 背景透明 */
}

.el-table .cell {
    padding-left: 0;
    padding-right: 0;
}

.el-table th {
    color: #ffffff; /* 字体颜色 */
    font-size: 20px;
    background-color: transparent !important; /* 背景透明 */
    border: 0;
    height: 30px;
    line-height: 30px !important;
}

.el-table th .cell {
    height: 30px;
    line-height: 30px !important;
}

.el-table .el-table__cell {
    text-align: center;
}

.el-table tr, .el-table td {
    color: #e5dada;
    font-size: 16px;
    background-color: transparent !important; /* 背景透明 */
    border: 0;
    height: 30px;
    line-height: 30px;
}

.vessel-seamless .el-table td,
.vessel-seamless .el-table th.is-leaf,
.vessel-seamless .el-table--border,
.vessel-seamless .el-table--group {
    border: none;
    cursor: pointer;
}

.vessel-seamless .el-table::before {
    height: 0;
}

/* 上面两个背景色透明才能让table的背景透明少一个都不行 */
</style>